<template>
  <div class="login-technician"
       :style="
      indexData?.loginBackgroundImg
        ? { 'background-image': 'url(' + indexData?.loginBackgroundImg + ')' }
        : { 'background-image': 'url(' + backgrounds + ')' }
    ">
    <div :class="['siteIcon', { 'hidden-sm-and-down': styleResponsive }]"
         :style="
        indexData?.loginLeftLogo
          ? { 'background-image': 'url(' + indexData.loginLeftLogo + ')' }
          : ''
      ">
    </div>
    <div :class="['copyrightStatement', { 'hidden-sm-and-down': styleResponsive }]"
         v-if="isOnLine">
      <div class="display">
        <div>
          版权信息：{{
            indexData?.copyrightInfo ? indexData?.copyrightInfo : '***********'
          }}
          <span v-if="indexData?.recordNumber?true:false">
            <br />
            备案号：<span @click="recordNumberFn(indexData?.recordNumber?'https://beian.miit.gov.cn/':false)">
              {{
            indexData?.recordNumber
              ? indexData?.recordNumber
              : '***********'
          }}
            </span>
          </span>

          <span v-if="indexData?.publicNetworkRecordNumber?true:false">
            <br />
            京公网备案号：<span @click="publicNetworkRecordNumberFn(indexData?.publicNetworkRecordNumber?'https://beian.mps.gov.cn/#/query/webSearch':false)">{{
            indexData?.publicNetworkRecordNumber
              ? indexData?.publicNetworkRecordNumber
              : '***********'
          }}</span>
          </span>
          <br />
          联系电话：{{ indexData?.phone ? indexData?.phone : '***********'
          }}<br />
          平台电话：{{
            indexData?.telephone ? indexData?.telephone : '***********'
          }}<br />
          地址：{{ indexData?.address ? indexData?.address : '***********'
          }}<br />
          上班时间:{{ indexData?.workingTime ? indexData?.workingTime : '***********'
          }}<br />
        </div>
        <div :class="[
            'ele-inline-block',
            { 'hidden-md-and-down': styleResponsive }
          ]"
             style="margin-left: 20px">
          在线客服
          <div>
            <img class="code"
                 :src="
                indexData?.customerServiceQrCode
                  ? indexData?.customerServiceQrCode
                  : require('/src/assets/images/微信图_09.png')
              "
                 alt="" />
          </div>
        </div>
      </div>
    </div>
    <el-card shadow="always"
             class="login-card">
      <div class="login-body">
        <h1 class="login-title">欢迎登录</h1>
        <h4 class="login-subtitle">WELCOME TO LOGIN</h4>
        <el-form ref="form"
                 size="large"
                 :model="form"
                 :rules="rules"
                 @keyup.enter="submit">
          <el-form-item prop="username">
            <el-input clearable
                      v-model="form.username"
                      placeholder="请输入登录账号"
                      @keyup.enter.native="submit"
                      prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password
                      v-model="form.password"
                      placeholder="请输入登录密码"
                      @keyup.enter.native="submit"
                      prefix-icon="el-icon-lock" />
          </el-form-item>
          <el-form-item prop="code">
            <div class="login-captcha-group">
              <el-input clearable
                        v-model="form.code"
                        placeholder="请输入验证码"
                        @keyup.enter.native="submit"
                        prefix-icon="el-icon-_vercode" />
              <div class="login-captcha"
                   @click="changeCaptcha">
                <img v-if="captcha"
                     :src="captcha" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.remember">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button size="large"
                       type="primary"
                       round
                       :loading="loading"
                       style="width: 73%; transform: translate(20%, 0); margin-top: 16px"
                       @click="submit">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import Cookies from 'js-cookie';
import { getSiteDomainName } from '@/api/site/index';
import { getUserRoleName } from '@/api/updateVersion';
import { selectPiratesite } from '@/api/updateVersion/index';
import { platformConfigDetail } from '@/api/platformSettings/index';
import I18nIcon from '@/layout/components/i18n-icon.vue';
import { getToken } from '@/utils/token-util';
import { login, getCaptcha } from '@/api/login';
import { siteLogin } from '@/api/mainPlatform/index';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'technicianEnd',
  components: {},
  props: {
    indexData: Object,
    isOnLine: Boolean
  },
  data () {
    return {
      // 登录框方向, 0居中, 1居右, 2居左
      direction: 0,
      // 加载状态
      loading: false,
      // 表单数据
      form: {
        username: '',
        password: '',
        remember: false,
        code: ''
      },
      // 验证码base64数据
      captcha: '',
      siteId: '',
      // 验证码内容, 实际项目去掉
      text: '',
      masterStation: 'true',
      backgrounds: require('/src/assets/images/anmoBackground_01.png'),
      loginLeftLogo: require('/src/assets/images/微信图片_8.png'),
      freeze: ''
    };
  },

  computed: {
    // 表单验证规则
    rules () {
      return {
        ip: '',
        currentSoftwareStatus: '',
        username: [
          {
            required: true,
            message: this.$t('login.username'),
            type: 'string',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('login.password'),
            type: 'string',
            trigger: 'blur'
          }
        ]
      };
    },
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.querys();
    // 获取主平台的配置 拿到
    this.getMainRealName();
    if (getToken()) {
      this.goHome();
    } else {
      this.changeCaptcha();
    }
    this.getCookie();
  },
  methods: {
    publicNetworkRecordNumberFn (url) {
      if (url) {
        window.open(url, '_blank');
        // window.location.href = url;
      }
    },
    recordNumberFn (url) {
      if (url) {
        window.open(url, '_blank');
        // window.location.href = url;
      }
    },
    /* 提交 */
    async submit () {
      if (this.form.remember) {
        console.log('存数据=============');
        Cookies.set('username', this.form.username, { expires: 600 });
        Cookies.set('password', this.form.password, { expires: 600 });
        Cookies.set('remember', this.form.remember, { expires: 600 });
      } else {
        // 否则移除
        Cookies.remove('username');
        Cookies.remove('password');
        Cookies.remove('remember');
      }

      const getRoleName = await getUserRoleName({
        username: this.form.username
      });
      console.log(getRoleName);

      if (getRoleName.roleName !== '站点') {
        this.$message.error('当前不是站点账号');
        return;
      }
      //   console.log(this.freeze)
      //   return
      if (this.freeze == '1') {
        this.$message.error('当前站点已经被冻结');
        return;
      }
      //   console.log(res)
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.form.code.toLowerCase() !== this.text) {
          this.$message.error('验证码错误');
          return;
        }
        this.loading = true;
        if (this.currentSoftwareStatus == '1') {
          this.loading = true;
          login(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.goHome();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.$message.error('当前软件为盗版软件禁止登录');
          this.loading = false;
          return;
        }
      });
    },
    async querys () {
      const result = await getSiteDomainName({


        siteDomainName: 'yjyksaas.admin168.net'
        // siteDomainName: ''
        // siteDomainName: window.location.host
      }).catch(() => { });

      this.freeze = result?.siteStatus;
      this.siteId = result.id;
    },

    async getMainRealName () {
      const result = await platformConfigDetail({
        siteId: this.siteId
      }).catch(() => { });
      console.log(result);
      //   fetch(apiUrl)
      //     .then(response => response.json())
      //     .then(async (data) => {

      //       this.ip = data.ip

      //     })
      //     .catch(error => console.error(error));
      const res = await selectPiratesite();
      //   const res = await selectPiratesite();
      //   1 正常登录    返回2 盗版不让登录

      console.log(res);
      if (res.code == 200) {
        //  如果当前的
        console.log(res.data);
        if (res.data == '1') {
          console.log('正版软件');
          this.currentSoftwareStatus = '1';
        } else {
          console.log('盗版软件');
          this.currentSoftwareStatus = '2';
        }
      }
    },
    /* 跳转到首页 */
    goHome () {
      this.$router.push(this.$route?.query?.from ?? '/').catch(() => { });
    },
    /* 更换图形验证码 */
    changeCaptcha () {
      // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
      getCaptcha()
        .then((data) => {
          this.captcha = data.base64;
          // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
          this.text = data.text;
          // 自动回填验证码, 实际项目去掉这个
          //   this.form.code = this.text;
          this.$refs?.form?.clearValidate();
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getCookie () {
      console.log('取数据=============');
      const usernames = Cookies.get('username');
      const passwords = Cookies.get('password');
      const remembers = Cookies.get('remember');
      console.log(usernames);
      console.log(passwords);
      console.log(remembers);
      this.form.username =
        usernames === undefined ? this.form.username : usernames;
      this.form.password =
        passwords === undefined ? this.form.password : passwords;
      this.form.remember =
        remembers === undefined ? this.form.remember : Boolean(remembers);
    }
  }
};
</script>

<style lang="scss" scoped>
.login-technician {
  min-height: 100vh;

  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  //   background-image: url('/src/assets/images/anmoBackground_01.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  //   background-size: contain;
  position: relative;
  .siteIcon {
    // background-image: url('/src/assets/images/网络登录_03.png');
    background-repeat: no-repeat;
    background-size: 60%;
    position: absolute;
    height: 101px;
    width: 329px;
    top: 50px;
    left: 100px;

    z-index: 9999;
  }
  .login-card {
    width: 400px;
    max-width: 100%;
    overflow: hidden;
    margin-right: 100px;
    :deep(.el-card__body) {
      padding: 0;
      height: 462px;
    }
  }
}
.copyrightStatement {
  color: #fff;
  line-height: 40px;
  position: absolute;
  font-size: 16px;
  bottom: 50px;
  left: 100px;
  .code {
    width: 100px;
    height: 100px;
  }
}

.login-body {
  width: 400px;
  flex-shrink: 0;
  padding: 32px 48px 0 48px;
  box-sizing: border-box;

  :deep(.el-checkbox) {
    height: auto;

    .el-checkbox__label {
      color: inherit;
    }
  }

  :deep(.el-input__prefix-inner > .el-icon) {
    margin-right: 12px;
    transform: scale(1.26) translateY(-1px);
  }
}

// 验证码
.login-captcha-group {
  width: 100%;
  display: flex;
  align-items: center;

  :deep(.el-input) {
    flex: 1;
  }

  .login-captcha {
    width: 108px;
    height: 40px;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 60%, 0.46);
    transition: border 0.2s;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    cursor: pointer;

    img {
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      margin: -2px 0 0 -2px;
      display: block;
    }

    &:hover {
      border-color: hsla(0, 0%, 60%, 0.8);
    }
  }

  :deep(.el-input__prefix-inner > .el-icon) {
    transform: scale(1.16);
  }
}

// 标题
.login-title {
  color: #007af5;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 0px 0;

  font-family: 'AliPuHui';
  letter-spacing: 1.2px;
}

.login-subtitle {
  color: #333333;
  font-size: 17px;
  margin: 0;
  font-weight: 700;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 4px;
  margin-bottom: 20px;
}
:deep(.el-icon) {
  color: #007af5;
}
/* 阿里巴巴普惠体 */
@font-face {
  font-family: 'AliPuHui';
  font-weight: 300;
  src: (
    url('//at.alicdn.com/wf/webfont/jWZHcEP2lzge/5AfKUTWZEo8W.woff2')
      format('woff2'),
    url('//at.alicdn.com/wf/webfont/jWZHcEP2lzge/Dvhs41TtRdYF.woff')
      format('woff')
  );
  font-display: swap;
}

// 二维码
.login-qrcode-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}

.login-qrcode {
  font-size: 0;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

// 小屏幕适应
@media screen and (max-width: 680px) {
  .login-technician {
    padding: 0;
    display: block;
    background: #fff;

    .login-card {
      width: 100%;
      background: none;
      box-shadow: none;
      border-radius: 0;

      :deep(.el-card__body) {
        display: block;
        height: auto;
      }
    }
  }

  .login-cover {
    padding: 24px 12px 100px 12px;
    background-size: auto 100px;
  }

  .login-body {
    width: 100%;
  }
}
</style>

<style lang="scss">
html.dark .login-technician {
  background: #000;
  filter: brightness(0.88);
}
</style>
